battlebearsfandomcom-20200215-history
Guide:Formatting
This simple little tutorial will give you a quick and easy way to format text using CSS. As you know, some stuff cannot be done using regular wiki-formatting, so we need to dig into the system and create these ourselves. This includes colored text and resizing text. A bit of knowledge on CSS is recommended, but not a necessity. Don't worry, as this is not at all as difficult as it may sound :) Quick introduction During these small tutorials you will encounter certain HTML tags. Namely the so-called ' tag which will allow us to customize small areas of a page. To utilise this, we must use inline CSS. A simple syntax for this would be: Formatted example text The ' tag being the selector, the property being the attribute we would like to change, and the value being the thing we want to edit on said property. The ''' is an end tag for the text area we want to edit. Colored text Okay, let's start out easy by learning how to do colored text on wiki pages. For example, if we want to have red text like this, we simple use this following snippet: '''This text will show as red. This gives us a lot of possibilities. We can even make rainbow colored text. You can see some easy examples in this following table: Custom text color If you encounter a spot where you want to use a certain color but it doesn't have a name we can still use this if you have the colors HEX-value. For an example, the background of the wiki has a background HEX-value called #DDDDDD. These number/letters represents a specific color. Use this page to find the colors and codes you need. When you have your color code, you simply insert that value instead of the specific color name from before. Like this: Resizing text In some cases you want to resize text to emphasize it. This can also be done using CSS. First off, there are a lot of different units on the internet for size and the like. On this, I will use pixels (px) only to make things easier. As before, we use the ' '''tag with inline CSS to add these attributes to certain text areas. Like this: However big you want the text to be, is entirely up to you. As long as you don't use an excessive amount of this and as long as the text is fully readable on 100% browser zoom. Combining resized and colored text In some rare cases, you may want to use both colored text and resize it. This is also very easy to perform as we simply combine the two CSS properties, seperated by a semi-colon. Like this: Read more You can find tons of information about inline CSS styling on the internet. Here are some great guides and/or explanations to a lot of it: *Wikipedia about HTML *Wikipedia about CSS *HTML tutorial on W3Schools *CSS tutorial on W3Schools As usual, if you have ANY questions, do not hesitate to ask in the comment section. No question is too small or too stupid to ask. I hope this guide will help you along with editing! :) '//Gnifle''' Category:Guides